import { Card, Row, Col, Typography, Space, Statistic } from 'antd'
import { RobotOutlined, MessageOutlined, DatabaseOutlined, ApiOutlined } from '@ant-design/icons'
import styles from './index.module.less'

const { Title, Paragraph } = Typography

function Home() {
  const features = [
    {
      icon: <RobotOutlined style={{ fontSize: 48, color: '#1890ff' }} />,
      title: 'AI 机器人',
      description: '创建和管理智能对话机器人，支持多种大语言模型'
    },
    {
      icon: <MessageOutlined style={{ fontSize: 48, color: '#52c41a' }} />,
      title: 'AI 对话',
      description: '与 AI 机器人进行自然语言对话，支持上下文理解'
    },
    {
      icon: <DatabaseOutlined style={{ fontSize: 48, color: '#722ed1' }} />,
      title: '知识库',
      description: '构建企业知识库，实现智能问答和文档检索'
    },
    {
      icon: <ApiOutlined style={{ fontSize: 48, color: '#fa8c16' }} />,
      title: '工作流',
      description: '设计 AI 工作流，实现复杂任务的自动化处理'
    }
  ]

  const statistics = [
    { title: '机器人数量', value: 12 },
    { title: '对话总数', value: 1893 },
    { title: '知识库文档', value: 456 },
    { title: '工作流数量', value: 23 }
  ]

  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <Title level={2}>欢迎使用 AiFlowy</Title>
        <Paragraph>
          AiFlowy 是一个功能强大的 AI 工作流管理平台，帮助您轻松构建和管理 AI 应用。
          通过集成多种大语言模型、知识库管理、工作流设计等功能，让 AI 为您的业务赋能。
        </Paragraph>
      </div>

      <Row gutter={[16, 16]} className={styles.statistics}>
        {statistics.map((stat, index) => (
          <Col xs={12} sm={6} key={index}>
            <Card>
              <Statistic title={stat.title} value={stat.value} />
            </Card>
          </Col>
        ))}
      </Row>

      <Title level={3} className={styles.featuresTitle}>核心功能</Title>
      
      <Row gutter={[16, 16]} className={styles.features}>
        {features.map((feature, index) => (
          <Col xs={24} sm={12} lg={6} key={index}>
            <Card className={styles.featureCard} hoverable>
              <Space direction="vertical" align="center" style={{ width: '100%' }}>
                {feature.icon}
                <Title level={4}>{feature.title}</Title>
                <Paragraph className={styles.description}>
                  {feature.description}
                </Paragraph>
              </Space>
            </Card>
          </Col>
        ))}
      </Row>

      <Card className={styles.quickStart}>
        <Title level={3}>快速开始</Title>
        <Paragraph>
          1. 首先，在"AI 机器人"页面创建您的第一个机器人<br />
          2. 然后，在"AI 对话"页面选择机器人开始对话<br />
          3. 您还可以上传文档到"知识库"，让机器人基于您的数据回答问题<br />
          4. 使用"工作流"功能，可以创建更复杂的 AI 应用流程
        </Paragraph>
      </Card>
    </div>
  )
}

// 默认导出组件，用于 React.lazy
export default Home

// 路由配置导出
export const routeConfig = {
  path: 'home',
  element: Home,
  frontEnable: false
}